<template>

    <div>
       <!-- tab栏 -->
      <div class="head">
        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
        <text class="head1">添加商品</text>
      </div>
      <div class="title">
      	<text class="ti1" :class="ti221">基本信息</text>
      	<text class="ti2" :class="ti222">规格属性</text>
      	<text class="ti3" :class="ti223">其他</text>
      </div>
      <div class="title_bottom">
      	<div class="bo1" v-if="tit1"></div>
      	<div class="bo2" v-if="tit2"></div>
      	<div class="bo3" v-if="tit3"></div>
      </div>
      <!-- 基本信息 -->
      <div class="info_message" v-if="missyou">
      	<div class="goods_name">
      		<text class="good_name_shop">商品名称:</text>
      		<input v-model="g_name_" type="text" placeholder="请输入商品名称" class="name_goods" />
      	</div>
      	<!-- <div class="shop_price">
      		<text class="shop_price_name">商品价格:</text>
      		<input type="text" placeholder="请输入商品价格" class="shop_name_price" />
      		<text class="shezhi_price" @click="shezhi()">设置活动价</text>
      	</div> -->
      	
      	<div class="shop_pic">
      		<text class="pic_shop">商品图片</text>
      		<text class="pic_shop_show">(商品图片最多展示9张最少4张)</text>
      	</div>
          <div class="shop_lalal" style="width:100%;display: block">
              <div v-for="i in add_pic_list_a" name="1" class="up_shop" @click="addImg($event,i.id)" v-show="i.or">
                  <image class="up_pic" :src="i.srcA1"></image>
                  <input name="1" v-on:change="addImg($event,i.id)" @click="addImg($event,i.id)" class="add_pic1" multiple="multiple" type="file"/>
              </div>
          </div>
      	<!-- <div class="shop_memory">
      		<text class="shop_memory1">商品库存:</text>
      		<input type="text" placeholder="请填写商品库存数" class="shop_memory2" />
      	</div> -->
      	<text class="shop_warn">注:如果该商品为汽车保养等服务,库存可不填写</text>
      	<div class="shop_picd">
      		<text class="pic_shop">商品描述</text>
      		<text class="pic_shop_show">在这描述一下你的商品呗</text>
      	</div>
      	<textarea class="text_shop"></textarea>
      	<div class="shop_pice">
      		<text class="pic_shop">商品详情图片</text>
      		<text class="pic_shop_show">(选填,最多可添加15张图片)</text>
      	</div>
          <div class="shop_lalal" style="width:100%;display: block">
              <div v-for="i in add_pic_list_b" name="1" class="up_shop" @click="addImg1($event,i.id)" v-show="i.or">
                  <image class="up_pic" :src="i.srcA1"></image>
                  <input name="1" v-on:change="addImg1($event,i.id)" @click="addImg1($event,i.id)" class="add_pic1" multiple="multiple" type="file"/>
              </div>
          </div>
      	<text class="next" @click="next()">下一步</text>
      </div>
      <!-- 规格属性 -->
      <div class="shop_specification" v-if="missU">
      	<div class="specification_text">
      		<text class="specification_cate">商品种类:</text>
      		<text @click="choose_g_c()" class="specification_choose">选择商品种类</text>
      	</div>
      	<div class="button_group">
      		<text class="button">上一步</text>
      		<text class="button" @click="next1()">下一步</text>
      	</div>
      </div>
      <!-- 规格属性~~~商品规格 -->
      <div class="goods_property" v-if="showproperty">
      	<div class="cate_goods">
      		<text class="cate_goods1">商品种类</text>
      		<text class="cate_goods2">{{cate}}</text>
      	</div>
        <text class="cate_tex">{{cate0}}</text>
      	<div class="cate_goods" v-for="( index,item ) in list2" :key="index.item">
      		<text class="cate_goods1">{{index.brand}}</text>
      		<input type="text" class="cate_goods3" placeholder="请输入" />
      	</div>
        <!-- 商品价格 -->
       <div class="shop_price" v-if="show_price">
          <text class="shop_price_name">商品价格:</text>
          <input type="text" placeholder="请输入商品价格" class="shop_name_price" />
          <text class="shezhi_price" @click="shezhi()">设置活动价</text>
        </div>
        <div class="shop_activity" v-if="shezhiShop">
          <text class="activity_price">活动价格:</text>
          <input type="text" placeholder="请输入活动价格" class="shop_activity_price" />
          <image :src="src2" class="activity_img"></image>
        </div>
        <div class="ahh_guige" v-if="cateray">
          <div class="ajj_guide">
            <text class="kk_io">{{iop}}</text>
            <input type="text" placeholder="请输入规格详情" class="shop_activity_price" />
          </div>
          <div class="cate_pic">
            <text class="kk_io">规格图片:</text>
            <image class="cate_photo" :src="src3"></image>
            <text class="choose_repeat">重新选择</text>
          </div>
          <div class="ajj_guide">
            <text class="kk_io">商品价格:</text>
            <input type="text" placeholder="请输入规格详情" class="shop_activity_price" />
          </div>
          <div class="ajj_guide">
            <text class="kk_io">商品库存:</text>
            <input type="text" placeholder="请输入活动价格" class="shop_activity_price" />
            <image :src="src2" class="activity_img" @click="reshsh()"></image>
          </div>
        </div>
        <!-- 添加规格 -->
        <div class="add_cate">
          <text class="add_button" @click="addCate()">添加规格</text>
        </div>
      	<div class="button_group1">
      		<text class="button">上一步</text>
      		<text class="button" @click="oth()">下一步</text>
      	</div>
      </div>
      <!-- 其他 -->
      <div class="other" v-if="otth">
      	<div class="goods_name">
      		<text class="good_name_shop">快递费用:</text>
      		<input type="text" placeholder="请设置商品邮寄费用" class="name_goods">
      	</div>
      	<div class="make_top">
      		<text class="top1">置顶商品</text>
      		<div class="top2" :class="top2_3" @click="choose()">
      			<div class="top2_1" :class="top2_2"></div>
      		</div>
      	</div>
      	<div class="make_top">
      		<text class="top1">店长推荐</text>
      		<div class="top2" :class="top2_4" @click="choose1()">
      			<div class="top2_1" :class="top2_5"></div>
      		</div>
      	</div>
      	<text class="beizhu">备注</text>
      	<textarea class="text111"></textarea>
      	<div class="button_group2">
      		<text class="button">上一步</text>
      		<text class="button" @click="fin()">完成</text>
      	</div>
      </div>
        <!-- 设置活动价格的弹窗 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长！如果您设置了活动价格,商品的价格为活动价哦~</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">朕知道了</text>
                  <!-- <text class="duanxin11">查看</text> -->
                </div>
              </div>
            </div>
         </div> 
           <!-- 设置商品价格为空的弹窗 -->
        <div class="wrap" v-if="show013">
            <div class="wqqq" v-if="show013"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长！商品价格为空，不能进行下一步操作哦~</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">确定</text>
                  <!-- <text class="duanxin11">查看</text> -->
                </div>
              </div>
            </div>
         </div> 
            <!-- 没上传图片的弹窗 -->
        <div class="wrap" v-if="show014">
            <div class="wqqq" v-if="show014"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">店长！您没有上传商品图片不能进行下一步操作哦~</text>
                <!-- <text class="www123">xx店铺xx区</text> -->
                <div class="wrap-4">
                  <text class="zhaohui11">确定</text>
                  <!-- <text class="duanxin11">查看</text> -->
                </div>
              </div>
            </div>
         </div>
        <!---------------------------------------------分割线-------------------------------------------------------------->
        <div>
            <div class="ca_head">
                <image :src="srccc" class="ca_headd" resize="cover" @click="backkk()"></image>
                <text class="ca_head1">添加商品种类</text>
            </div>
            <div class="ca_box">
                <div class="ca_box1">
                    <text class="ca_fir1" v-for="( index, item ) in itemsss" :key="index.item"
                          @click="activeTab = i">{{index.biu}}</text>
                </div>
                <div class="ca_tab-panels">
                    <div class="ca_panel" v-for="( index,item ) in listtt" :key="index.item">
                        <image class="ca_pop" :src="index.src"></image>
                        <text class="ca_pol_text">{{index.text}}</text>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<style scoped>
    .ca_head{
        width: 100%;
        height: 48px;
        padding-top: 12px;
        box-sizing: border-box;
        line-height: 32px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-shadow: 1px 1px 1px #ccc;
        background-color: #fff;
    }
    .ca_headd{
        width: 15px;
        height: 20px;
        position: absolute;
        left: 12px;
    }
    .ca_head1{
        font-size: 20px;
        font-weight: bold;
        color: #33c179;
    }
    .ca_box{
        width: 100%;
        min-height: 600px;
        /*background-color: pink;*/
        flex-direction: row;
        box-sizing: border-box;
    }
    .ca_box1{
        width: 96px;
        height: 600px;
        /*background-color: silver;*/
        flex-direction: column;
        border-right: solid 1px #bfbfbf;
        box-sizing: border-box;
    }
    .ca_tab-panels{
        width: 253px;
        height: 600px;
        /*background-color: red;*/
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: row;
        overflow: scroll;
    }
    .ca_fir1{
        width: 96px;
        min-height: 50px;
        line-height: 50px;
        text-align: center;
        /*background-color: pink;*/
        border-bottom: solid 1px #bfbfbf;
        padding-left: 5px;
        padding-right: 5px;
    }
    .ca_panel{
        width: 62px;
        height: 118px;
        /*background-color: pink;*/
        box-sizing: border-box;
        flex-direction: column;
        box-sizing: border-box;
        margin-right: 20px;
    }
    .ca_pop{
        width: 62px;
        height: 62px;
        border-radius: 50%;
        /*background-color: silver;*/
        margin-top: 20px;
        box-shadow: 1px 3px 3px #e7e3e3;

    }
    .ca_pol_text{
        width: 62px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        margin-top: 20px;
    }
</style>
<style scoped>
    .add_pic1{
        opacity: 0;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        width:50px;
        height:50px;
        font-size: 0;
    }
    .shop_lalal{
        width:100%;
        display: block;
        overflow: hidden;
    }
  .kk_io{
    line-height: 15px;
    font-size: 15px;
    height: 15px;
    color: #333;
  }
  .cate_pic{
    width: 100%;
    height: 50px;
    flex-direction: row;
    /*background-color: red;*/
    margin-top: 30px;
  }
  .cate_photo{
    width: 50px;
    height: 50px;
    /*background-color: yellow;*/
    margin-left: 12px;
  }
  .choose_repeat{
    margin-left: 16px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    color: #33c179;
    margin-top: 36px;
  }
</style>
<style scoped>
    .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
    }
    .headd{
      width: 15px;
      height: 20px;
      position: absolute;
      left: 12px;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
      color: #33c179;
    }
    .ahh_guige{
      width: 100%;
      height: 213px;
      /*background-color: pink;*/
      padding-left: 12px;
      padding-right: 12px;

    }
    .title{
    	width: 244px;
    	height: 15px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 30px;
    	justify-content: space-between;
    	flex-direction: row;
    }
    .ti1{
    	line-height: 15px;
    	color: #33c179;
    	font-size: 15px;
    }
    .ti4{
    	color: #333;
    }
    .ti2{
    	line-height: 15px;
    	color: #333;
    	font-size: 15px;
    }
    .ajj_guide{
      width: 100%;
      height: 15px;
      /*background-color: silver;*/
      margin-top: 30px;
      flex-direction: row;
    }
    .ti3{
    	line-height: 15px;
    	color: #333;
    	font-size: 15px;
    }
    .ti22{
    	color: #33c179;
    }
    .cate_tex{
      width: 100%;
      height: 15px;
      font-size: 15px;
      line-height: 15px;
      padding-left: 12px;
      color: #33c179;
      margin-top: 30px;
    }
    .title_bottom{
    	width: 255px;
    	height: 4px;
    	/*background-color: #33c179;*/
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	flex-direction: row;
    	justify-content: space-between;
    	position: relative;
    }
    .bo1{
    	width: 70px;
    	height: 4px;
    	background-color: #33c179;
    	border-radius: 25px;
    	position: absolute;
    	left: 0;
    }
    .bo2{
    	width: 70px;
    	height: 4px;
    	background-color: #33c179;
    	border-radius: 25px;
    	position: absolute;
    	left: 108px;
    }
    .bo3{
    	width: 70px;
    	height: 4px;
    	background-color: #33c179;
    	border-radius: 25px;
    	position: absolute;
    	right: -15px;
    }
    .info_message{
    	width: 100%;
    	min-height: 800px;
    }
    .goods_name{
    	width: 100%;
    	height: 14px;
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 30px;
    	box-sizing: border-box;
    	border: none;
    }
    .shop_memory{
    	width: 100%;
    	height: 14px;
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 20px;
    	box-sizing: border-box;
    	border: none;
    }
    .good_name_shop,.shop_memory1{
    	line-height: 14px;
    	height: 14px;
    	border: none;
    	font-size: 14px;
    	color: #333;
    }
    .name_goods,.shop_memory2{
    	margin-left: 22px;
    	height: 14px;
    	border: none;
    	line-height: 14px;
    	font-size: 14px;
    }
    .shop_price{
    	flex-direction: row;
    	width: 100%;
    	height: 14px;
    	box-sizing: border-box;
    	border: none;
    	padding-left: 12px;
    	margin-top: 30px;
    }
    .shop_activity{
    	flex-direction: row;
    	width: 100%;
    	height: 14px;
    	box-sizing: border-box;
    	border: none;
    	padding-left: 12px;
    	margin-top: 30px;
    	position: relative;
    	padding-right: 12px;
    }
    .add_cate{
      flex-direction: row;
      width: 100%;
      height: 14px;
      box-sizing: border-box;
      border: none;
      padding-left: 12px;
      margin-top: 30px;
      position: relative;
      padding-right: 12px;
      flex-direction: row-reverse;
    }
    .shop_price_name{
    	line-height: 14px;
    	height: 14px;
    	border: none;
    	font-size: 14px;
    	color: #333;
    }
    .activity_price{
    	line-height: 14px;
    	height: 14px;
    	border: none;
    	font-size: 14px;
    	color: #33c179;
    }
    .shop_name_price,.shop_activity_price{
    	margin-left: 22px;
    	height: 14px;
    	border: none;
    	line-height: 14px;
    	font-size: 14px;
    }
    .shezhi_price{
    	height: 14px;
    	line-height: 14px;
    	font-size: 14px;
    	color: #33c179;
    }
    .activity_img{
    	width: 19px;
    	height: 19px;
    	/*background-color: pink;*/
    	border-radius: 50%;
    	margin-left: 50px;
    }
    .shop_pic{
    	width: 100%;
    	height: 14px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 30px;
    }
    .shop_pice{
    	width: 100%;
    	height: 14px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 20px;
    }
    .shop_picd{
    	width: 100%;
    	height: 14px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	flex-direction: row;
    	margin-top: 20px;
    }
    .pic_shop{
    	line-height: 14px;
    	font-size: 14px;
    	height: 14px;
    	color: #333;
    }
    .pic_shop_show{
    	height: 13px;
    	font-size: 13px;
    	color: #999;
    	margin-left: 20px;
    	line-height: 13px;
    }
    .up_shop{
    	width: 87px;
    	height: 95px;
    	justify-content: center;
    	align-items: center;
    	/*background-color: pink;*/
    	border: solid 1px #999;
    	margin-top: 19px;
    	margin-left: 12px;
        margin:20px 18px;
        float:left;
        overflow: hidden;
    }
    .up_pic{
    	width: 50px;
    	height: 50px;
    }
    .shop_warn{
    	width: 100%;
    	height: 13px;
    	line-height: 13px;
    	color: #33c179;
    	font-size: 13px;
    	padding-left: 12px;
    	margin-top: 17px;
    }
    .text_shop{
    	width: 351px;
    	height: 117px;
    	margin-left: auto;
    	margin-right: auto;
    	border: solid 1px #999;
    	margin-top: 20px;
    }
    .next{
    	width: 99px;
    	height: 31px;
    	line-height: 31px;
    	font-size: 15px;
    	font-weight: bold;
    	color: #fff;
    	background-color: #33c179;
    	text-align: center;
    	justify-content: center;
    	border-radius: 25px;
    	margin-top: 40px;
    	margin-left: auto;
    	margin-right: auto;
    }
    .specification_text{
    	width: 339px;
    	margin-right: auto;
    	margin-left: auto;
    	height: 30px;
    	/*padding-left: 12px;*/
    	flex-direction: row;
    	justify-content: space-between;
    	margin-top: 30px;
    }
    .specification_cate{
    	height: 15px;
    	line-height: 15px;
    	font-size: 15px;
    	margin-top: 7px;
    }
    .specification_choose{
    	width: 117px;
    	height: 30px;
    	line-height: 30px;
    	text-align: center;
    	color: #fff;
    	font-weight: bold;
    	font-size: 15px;
    	background-color: #33c179;
    	border-radius: 25px;
    }
    .button_group{
    	width: 258px;
    	height: 31px;
    	flex-direction: row;
    	justify-content: space-between;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 170px;
    }
    .button_group1{
    	width: 258px;
    	height: 31px;
    	flex-direction: row;
    	justify-content: space-between;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 57px;
    }
    .button_group2{
    	width: 258px;
    	height: 31px;
    	flex-direction: row;
    	justify-content: space-between;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 52px;
    }
    .button{
    	width: 98px;
    	height: 31px;
    	border-radius: 25px;
    	color: #fff;
    	text-align: center;
    	line-height: 31px;
    	background-color: #33c179;
    }
    .cate_goods{
    	width: 100%;
    	height: 14px;
    	flex-direction: row;
    	padding-left: 12px;
    	margin-top: 30px;
    }
    .cate_goods1{
    	line-height: 14px;
    	height: 14px;
    	color: #333;
    	font-size: 14px;
    }
    .cate_goods2{
    	margin-left: 27px;
    	color: #33c179;
    	font-size: 14px;
    	font-weight: bold;
    	height: 14px;
    	line-height: 14px;
    }
    .cate_goods3{
    	margin-left: 27px;
    	color: #333;
    	font-size: 14px;
    	/*font-weight: bold;*/
    	height: 14px;
    	line-height: 14px;
    }
    .make_top{
    	width: 100%;
    	height: 15px;
    	flex-direction: row;
    	padding-left: 12px;
    	padding-right: 12px;
    	box-sizing: border-box;
    	justify-content: space-between;
    	margin-top: 30px;
    }
    .top2_1{
    	width: 11px;
    	height: 11px;
    	border-radius: 50%;
    	position: absolute;
    	background-color: #33c179;
    	/*border: solid 1px #33c179;*/
    	left: 1px;
    }
    .top2{
    	width: 52px;
    	height: 16px;
    	border-radius: 25px;
    	border: solid 2px #d2d2d2;
    	position: relative;
    }
    .top1{
    	height: 15px;
    	line-height: 15px;
    	font-size: 15px;
    }
    .top2_3{
    	width: 52px;
    	height: 16px;
    	border-radius: 25px;
    	border: solid 2px #33c179;
    	position: relative;
    	background-color: #33c179;
    }
    .top2_4{
    	width: 52px;
    	height: 16px;
    	border-radius: 25px;
    	border: solid 2px #33c179;
    	position: relative;
    	background-color: #33c179;
    }
    .top2_2{
    	width: 11px;
    	height: 11px;
    	border-radius: 50%;
    	position: absolute;
    	background-color: #fff;
    	/*border: solid 1px #33c179;*/
    	left: 37px;
    }
    .top2_5{
    	width: 11px;
    	height: 11px;
    	border-radius: 50%;
    	position: absolute;
    	background-color: #fff;
    	/*border: solid 1px #33c179;*/
    	left: 37px;
    }
    .beizhu{
    	width: 100%;
    	height: 15px;
    	line-height: 15px;
    	padding-left: 12px;
    	color: #333;
    	margin-top: 30px;
    }
    .text111{
    	width: 351px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 30px;
    	height: 133px;
    	border: solid 1px #d2d2d2;
    }
     .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .www123{
      color: #33c179;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 299;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 300;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
      /*flex-direction: row;*/  
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
      flex-direction: row;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
    .add_button{
      width: 98px;
      height: 30px;
      border-radius: 25px;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      font-weight: bold;
      border: solid 1px #33c179;
    }
</style>
<script>
    import catery_shop from "./catery_shop.vue"
export default {
        components:{
            catery_shop
        },
    data () {
        return {
         	src1: 'http://192.168.2.123:8080/img/index_back.png', //返回按钮
         	src2: 'http://192.168.2.123:8080/img/shop_icon.png',  //感叹号
            add_pic_list_a:[
                {id:1,or:true,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:2,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:3,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:4,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:5,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:6,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:7,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:8,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:9,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'}
                ],
            add_pic_list_b:[
                {id:1,or:true,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:2,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:3,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:4,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:5,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:6,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:7,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:8,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:9,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:10,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:11,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:12,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:13,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:14,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
                {id:15,or:false,srcA1: 'http://192.168.2.123:8080/img/shop_add2.png'},
            ],
            srcB1: 'http://192.168.2.123:8080/img/shop_add2.png',  //商品详情图添加十字架
            src4: 'http://192.168.2.123:8080/img/Specificationattribute_icon_reduce.png', //减号
         	ti221: '',
          cate0: '商品属性',
         	ti222: '',
         	ti223: '',
          iop: '规格1:',
         	tit1: true,
         	tit2: false,
         	tit3: false,
          show012: false, //设置活动价格的弹窗
         	missyou: true, //基本信息
         	shezhiShop: false, //设置活动价格
         	missU: false,
         	showproperty: false,
         	cate: '常规保养-防冻液', //商品种类
         	cate1: '爱个够无所谓疯狂beloved', //品牌
         	cate2: '4.172', //重量
         	cate3: '蓝色', //颜色
         	cate4: '4L', //包装尺寸
         	cate5: 'APD5201314', //型号
         	cate6: '3.78L',  //商品容量
         	otth: false,
         	top2_3: '',
         	top2_2: '',
         	top2_4: '',
         	top2_5: '',
          show013: false, //设置商品价格为空的弹窗
          show014: false,
          show_price: true, //商品价格显示
          cateray: false,
          list2: [
            {
              brand: '品牌',
            },
            {
              brand: '重量',
            },
            {
              brand: '颜色',
            },
            {
              brand: '包装尺寸',
            },
            {
              brand: '型号',
            },
          ],
            g_name_:"",
            component_show:true,//组件显示/隐藏
            /*--------------------------------*/
            srccc: 'http://192.168.2.123:8080/img/index_back.png', //返回按钮
            activeTab: 0,
            itemsss: [
                {
                    biu: '所有类目',
                },
                {
                    biu: '汽车服务',
                },
                {
                    biu: '常规保养',
                },
                {
                    biu: '汽车维修',
                },
                {
                    biu: '美容清洗',
                },
                {
                    biu: '汽车相关',
                },
                {
                    biu: '常用配件',
                },
                {
                    biu: '汽车内饰',
                },
                {
                    biu: '我的类目',
                },
            ],
            listtt:[
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                },
                {
                    text: '我不信',
                    src: 'http://192.168.2.123:8080/img/header.jpg'
                }
            ]
            /*---------------------------------*/
        }
    },
    methods: {
        //    fengexian-----------------------------------------
        // 点击返回
        backkk(){
            this.$router.back(-1);
        },
        //    fengexian-----------------------------------------
        /*------------------------------------本页面第一步-------------------------------------------*/
        // 添加商品图片
        addImg(e,num){
            console.log(num);
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                if(num==1){
                    this.add_pic_list_a[0].srcA1 = e.target.result;
                    this.add_pic_list_a[1].or=true;
                }else if(num==2){
                    this.add_pic_list_a[1].srcA1 = e.target.result;
                    this.add_pic_list_a[2].or=true;
                    e.target.result='';
                }else if(num==3){
                    this.add_pic_list_a[2].srcA1 = e.target.result;
                    this.add_pic_list_a[3].or=true;
                }else if(num==4){
                    this.add_pic_list_a[3].srcA1 = e.target.result;
                    this.add_pic_list_a[4].or=true;
                }else if(num==5){
                    this.add_pic_list_a[4].srcA1 = e.target.result;
                    this.add_pic_list_a[5].or=true;
                }else if(num==6){
                    this.add_pic_list_a[5].srcA1 = e.target.result;
                    this.add_pic_list_a[6].or=true;
                }else if(num==7){
                    this.add_pic_list_a[6].srcA1 = e.target.result;
                    this.add_pic_list_a[7].or=true;
                }else if(num==8){
                    this.add_pic_list_a[7].srcA1 = e.target.result;
                    this.add_pic_list_a[8].or=true;
                }else if(num==9){
                    this.add_pic_list_a[8].srcA1 = e.target.result;
                    this.srcA9 = e.target.result;
                }
                e.target.result='';
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
        // 添加商品详情图片
        addImg1(e,num){
            console.log(num);
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                if(num==1){
                    this.add_pic_list_b[0].srcA1 = e.target.result;
                    this.add_pic_list_b[1].or=true;
                }else if(num==2){
                    this.add_pic_list_b[1].srcA1 = e.target.result;
                    this.add_pic_list_b[2].or=true;
                    e.target.result='';
                }else if(num==3){
                    this.add_pic_list_b[2].srcA1 = e.target.result;
                    this.add_pic_list_b[3].or=true;
                }else if(num==4){
                    this.add_pic_list_b[3].srcA1 = e.target.result;
                    this.add_pic_list_b[4].or=true;
                }else if(num==5){
                    this.add_pic_list_b[4].srcA1 = e.target.result;
                    this.add_pic_list_b[5].or=true;
                }else if(num==6){
                    this.add_pic_list_b[5].srcA1 = e.target.result;
                    this.add_pic_list_b[6].or=true;
                }else if(num==7){
                    this.add_pic_list_b[6].srcA1 = e.target.result;
                    this.add_pic_list_b[7].or=true;
                }else if(num==8){
                    this.add_pic_list_b[7].srcA1 = e.target.result;
                    this.add_pic_list_b[8].or=true;
                }else if(num==9){
                    this.add_pic_list_b[8].srcA1 = e.target.result;
                    this.add_pic_list_b[9].or=true;
                }else if(num==10){
                    this.add_pic_list_b[9].srcA1 = e.target.result;
                    this.add_pic_list_b[10].or=true;
                }else if(num==11){
                    this.add_pic_list_b[10].srcA1 = e.target.result;
                    this.add_pic_list_b[11].or=true;
                }else if(num==12){
                    this.add_pic_list_b[11].srcA1 = e.target.result;
                    this.add_pic_list_b[12].or=true;
                }else if(num==13){
                    this.add_pic_list_b[12].srcA1 = e.target.result;
                    this.add_pic_list_b[13].or=true;
                }else if(num==14){
                    this.add_pic_list_b[13].srcA1 = e.target.result;
                    this.add_pic_list_b[14].or=true;
                }else if(num==15){
                    this.add_pic_list_b[14].srcA1 = e.target.result;
                }
                e.target.result='';
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
    	// 点击返回
       back(){
       	this.$router.back(-1);
       },
       // 点击基本信息
       ti1(){
       	// this.ti221 = 'ti22';
       	// this.ti222 = 'ti2';
       	// this.ti223 = 'ti3';
       	this.tit1 = true;
       	this.tit2 = false;
       	this.tit3 = false;
       	this.missyou = true;
       },
       // 点击感叹号
       shezhi(){
       	this.shezhiShop = !this. shezhiShop;
       },
       // 基本信息点击下一步
       next(){
        if(this.g_name_!==''){
            this.tit2 = true;
            this.tit1 = false;
            this.tit3 = false;
            this.missyou = false;
            this.missU = true;
        }
        /*------------------------------------本页面第2步-------------------------------------------*/
       },
        choose_g_c(){
            this.$router.push("/catery_shop");
        },
       // 规格属性点击下一步
       next1(){
       	this.missU = false;
       	this.showproperty = true; //点击下一步  显示规格
       },
       // 规格属性点击下一步~~详情的
       oth(){
       	this.showproperty = false; //
       	this.otth = true;
       	this.tit3 = true;
       	this.tit1 = false;
       	this.tit2 = false;
       	this.ti223 = 'ti22';
       	this.ti222 = 'ti2';
       },
       // 点击开关
       choose(){
       	let a = '';
       	if(a == ''){
       		this.top2_3 = 'top2_3';
       		this.top2_2 = 'top2_2';
       		a= 1;
       	}else if(a !== ''){
       		this.top2_3 = 'top2_1';
       		this.top2_2 = 'top2';
       		a='';
       	}
       },
       // 点击店长推荐
       choose1(){
       	let a = '';
       	if(a == ''){
       		this.top2_4 = 'top2_4';
       		this.top2_5 = 'top2_5';
       		a= 1;
       	}else if(a !== ''){
       		this.top2_4 = 'top2';
       		this.top2_5 = 'top2_1';
       		a='';
       	}
       },
       fin(){
           stream.fetch({
               method: 'POST',
               url: "http://192.168.2.140:8081/api/dept/register",
               type: 'json',
               body:`{
                "creator": "赵军军",
               "modifier": "赵军军",
               "shopsid": 1,
               "goodclassid": 1,
               "gname": "机油",
               "gaddress": "西安高产生产区",
               "gspecifications": "本田专业机油",
               "gprice": 160,
               "gfavorablePrice": 120,
               "gpurpose": "123",
               "gimg": "图片",
               "ginformation": "详细信息",
               "goodsSpecAttrDTOS": [
               {
                   "goodsId": 1,
                   "specId": 1,
                   "specAttrName": "机头/IDEMITSU"
               },
               {
                   "goodsId": 1,
                   "specId": 2,
                   "specAttrName": "9升"
               }
           ],
               "goodsSpecDetailedDTOS": [
               {
                   "creator": "赵军",
                   "modifier": "赵军",
                   "goodsId": 1,
                   "specName": "蓝本机油",
                   "price": 240,
                   "gfavorablePrice": 160,
                   "goodsNumber": 20

               }
           ]
               }`,
               headers:{
                   'Content-Type':'application/json'
               },
               mode:"cors"

           });
        this.$router.push('/shop_full_goods');
       },
       // 点击添加规格
       addCate(){
          this.show_price = false;
          this.cateray = true;
       },
       // 点击减号还原页面
       reshsh(){
          this.cateray = false;
          this.show_price = true;
       }
    }
}
</script>